<template>
    <div>
        <van-nav-bar title="分类" left-text="返回" left-arrow @click-left="() => { $router.push('/') }"/>
        <van-row>
            <van-col span="8">

                <van-sidebar v-model="active">
                    <van-sidebar-item title="移动电源" />
                    <van-sidebar-item title="数据线" />
                    <van-sidebar-item title="蓝牙耳机" />
                    <van-sidebar-item title="电源适配器" />
                    <van-sidebar-item title="笔记本电池" />
                    <van-sidebar-item title="车充" />
                    <van-sidebar-item title="插线板" />
                </van-sidebar>
            </van-col>

            <van-col span="10" style="width: 100%; height: 100%;">
                <van-search v-model="value" placeholder="搜索" @search="onSearch" style="width: 240px; height: 40px;">
                </van-search>

                <van-card price="99" desc="白色30000mAhYKMSO1824移动电源充电宝"
                  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/apple-5.jpeg" style="width: 240px; height: 150px;">
                </van-card>
                <div style="height: 10px;"></div>
                 <van-card price="99" desc="白色30000mAhYKMSO1824移动电源充电宝"
                  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/apple-7.jpeg" style="width: 240px; height: 150px;">
                </van-card>
                <div style="height: 10px;"></div>
                                <van-card price="99" desc="白色30000mAhYKMSO1824移动电源充电宝"
                  thumb="https://fastly.jsdelivr.net/npm/@vant/assets/apple-8.jpeg" style="width: 240px; height: 150px;">
                </van-card>
            </van-col>
        </van-row>
<van-submit-bar :price="99000" button-text="去结算" @submit="onSubmit" />
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router =useRouter()
    const onSubmit = () =>{
         router.push('/xq')
    }
const active = ref(1);
</script>

<style lang="scss" scoped></style>